<!--  -->
<template>
  <div :class="{btnRed: btnType=='1', btnBlue: btnType=='2', btnNormal: btnType!='2' && btnType!='1' }" :style="btnStyle">{{label}}</div>
</template>

<script>
export default {
 inject: ['getNode'],
 name:'Count',
 components: {},
 data () {
   return {
    label: '',
    btnType: 1,
   };
 },

 props: {},
 computed: {
  btnStyle() {
    if (this.btnType === '1' || this.btnType === '2') return ''
    return `background:${this.btnType }`
  }
 },

 created() {
 },

 activated() {},

 mounted() {

  let node = this.getNode()

  this.label = node.data.labelText
  this.btnType = node.data.btnType
  
  node.on('change:data', cell => {
    console.log(cell.current)
      this.label = cell.current.labelText
      this.btnType = cell.current.btnType
    })
 },

 methods: {
  onMyEvent(node) {
    // 节点组件中触发事件，传递数据
    this.$emit('myEvent', 'data from FlowNode', node)
    
  }
 }
}

</script>
<style scoped>
.btnRed{
  height:100%;
  background: linear-gradient(180deg, #FE7590, #FE5E6D);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 500;
  color: #FFFFFF;
}
.btnBlue{
  height:100%;
  background: linear-gradient(90deg, #5F87F8, #3860F4);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 500;
  color: #FFFFFF;
}
.btnNormal{
  height:100%;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 500;
  color: #FFFFFF;
}
</style>